<template>
  <div class="">
    <div class="display-flex">
      <div class=" display-flex-column ml-auto">
        <div class="display-flex ml-auto"><el-button
          size="small"
          type="primary"
          @click="addDatePrice()"
          >添加价格日历
          </el-button></div>
      <div class="desc" style="margin-top: 10px;">注：如日期已有价格日历，新增价格日历会覆盖原有的价格日历。</div>
      </div>
    </div>
    <div class="carMywrapper mt-10">
      <div class="type-radio">
        <el-calendar>
          <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
          <template
          slot="dateCell"
          slot-scope="{date, data}">
          <div >
            <div>
              <div>
              {{data.day.split('-').slice(1).join('-')}} 
              </div>
              <div  class="display-flex" style=" position: relative;" v-if="item.date == data.day"  v-for="(item, index) in dateList" :key="index">
                <div class="mt-20">
                  <div style="color: #1f37f1;margin-bottom: 5px;">成人价：￥{{item.adult_price}}</div>
                  <div style="color: #1f37f1;margin-bottom: 5px;">儿童价：{{item.child_price?'￥'+item.child_price:'--'}}</div>
                  <div style="color: #1f37f1;margin-bottom: 5px;">单房价：{{item.room_price?'￥'+item.room_price:'--'}}</div>
                  <div style="color: #1f37f1;margin-bottom: 5px;">老人价：{{item.old_price?'￥'+item.old_price:'--'}}</div>
                  <div style="color: #1f37f1;margin-bottom: 5px;">售出：<span style="color: #ff6c00;">{{item.sales?item.sales:0}}</span></div>
                  <div style="color: #1f37f1">库存：<span  :style="item.stock<10?'color: #ff0000;':'color: #1f37f1;'">{{item.stock}}</span></div>
                </div>
                <div v-if="data.isSelected" @click="editDatePrice(item,index)" style="margin-top: -15px;right: 0px;position: absolute;">
                  <i class="el-icon-edit-outline ml-10 text-20" ></i>
                </div>
              </div>
            </div>
            
          </div>	
          </template>
        </el-calendar>
      </div>
    </div>

    
      <el-dialog
        v-if="dialogVisible"
        title="修改价格/库存"
        :visible.sync="dialogVisible"
        width="500px"
        append-to-body
      >
        <div class="container">
          <el-form label-width="80px" size="small">
            <el-form-item  label="成人价：">
              <el-input v-model="priceItem.adult_price" type="number" placeholder="请输入成人价" class="selWidth" size="small"  /> 
            </el-form-item>
            <el-form-item  label="儿童价：">
              <el-input v-model="priceItem.child_price" type="number" placeholder="请输入儿童价" class="selWidth" size="small"  /> 
            </el-form-item>
            <el-form-item  label="单房差">
              <el-input v-model="priceItem.room_price" type="number" placeholder="请输入单房差" class="selWidth" size="small"  /> 
            </el-form-item>
            <el-form-item  label="老人价：">
              <el-input v-model="priceItem.old_price" type="number" placeholder="请输入老人价" class="selWidth" size="small"  /> 
            </el-form-item>
            <el-form-item label="库存：">
              <el-input v-model="priceItem.stock"  type="number" placeholder="请输入库存" class="selWidth" size="small"  /> 
            </el-form-item>
          </el-form>
          
        </div> 
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small">取消</el-button>
          <el-button type="primary" @click="handleCancellation" size="small">确定修改</el-button>
        </span>    
      </el-dialog> 

       <addPriceDate  ref="priceDate"  :dateArr="dateList"  @changePrice="changePrice" ></addPriceDate>

  </div>
</template>
<script>

import addPriceDate from "@/components/addPriceDate/index.vue"
productChangePriceDateApi
import {

  productChangePriceDateApi,
} from '@/api/product'
export default {
  name: 'mealDatePrice',
   components: {
    addPriceDate,
  },
  props: {
    meal_index: {
      type: Number,
      default: 0
    },
    dateArr: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
     dateList: [],
     priceItem: {},
     priceIndex: '',
     dialogVisible: false,
    }
  },
  watch: {
    'dateArr': { 
      handler: function(newVal, oldVal) {
        if(newVal){
          this.dateList = this.dateArr
        }
        
      },
      immediate: false,
      deep: true
    },
  
  },
  created(){
    if(this.dateArr && this.dateArr.length){
       this.dateList = this.dateArr
    }
   
   
  },
  mounted() {

  },
  methods: {
     //添加价格日历
	  addDatePrice( ) {

      // 1.批量 2.单规格3.多规格
    

      this.$refs.priceDate.priceDateShow = true;	
        // this.virtualListClear();
	  },

    editDatePrice(item,index){
			console.log(123,item);
			this.priceItem = item;
			this.priceIndex = index;
			this.dialogVisible = true
		},
    handleCancellation(){
       console.log('priceItem',this.priceItem)
			if(!this.priceItem.adult_price){
				return this.$message.error("请输入成人价格")
			}
			if(!this.priceItem.stock){
				return this.$message.error("请输入库存")
			}
			this.dateList[this.priceIndex] = this.priceItem;
			this.dialogVisible = false;

      this.fullscreenLoading = true;
      this.loading = true;
      productChangePriceDateApi({ data: this.priceItem})
      .then(async res => {
        this.fullscreenLoading = false;
        this.$message.success('编辑成功');
        this.loading = false;
      })
      .catch(res => {
        this.fullscreenLoading = false;
        this.loading = false;
        this.$message.error(res.message);
      })
		},	


    
    changePrice(e){
      console.log(e)
      // this.skuForm.addDateList = e.finalDataList;
      // this.flag++
      // this.savePriceDate()
      this.dateList = e.finalDataList;
      this.$emit('changePriceDate',{
          finalDataList: e.finalDataList,
          meal_index: this.meal_index
        })
    },
    savePriceDate(){
      console.log("this.skuForm",this.skuForm)

      if(!this.product_id){
        return this.$message.error("请先保存产品信息")
      }
    
   
      if(!this.skuForm.addDateList.length){
        return this.$message.error("请检查价格日历是否添加")
      }


      this.fullscreenLoading = true;
      this.loading = true;
      console.log('this.skuForm',this.skuForm)
      productUpdatePriceDateApi(this.product_id, this.skuForm)
      .then(async res => {
        this.getInfo()
        this.fullscreenLoading = false;
        this.$message.success(res.message);
        this.loading = false;
        this.skuForm.addDateList = [];
      })
      .catch(res => {
        this.fullscreenLoading = false;
        this.loading = false;
        this.$message.error(res.message);
      })
    },

  }
}
</script>

<style scoped lang="scss">
.carMywrapper{
      border: 1px solid #ebeef5;
  .download{
    margin-left: 10px;
  }
  .stock-disk{
    margin: 10px 0 15px 0;
  }
  .scroll-virtual {
    max-height: 320px;
    overflow-y: auto;
    margin-top: 10px;
  }
  .virtual-title {
    width: 50px;
  }
  .deteal-btn {
    color: #5179ea;
    cursor: pointer;
  }
  .add-more {
    margin-top: 20px;
    line-height: 32px;

  }
  .footer{
    display: flex;
    justify-content: flex-end;
    margin-top: 40px;
    button{
      margin-left: 10px;
    }
  }
}
::v-deep .el-input-group--append .el-input__inner{
  padding-right: 0;
}
::v-deep .el-calendar-table .el-calendar-day {

  height: 100px;
}
.desc{
  color: #999999;
  font-size: 12px;
}
</style>
